<template>
  <div class="pagination">
    <ul
      class="
        d-flex
        align-items-center
        h-100
        justify-content-center justify-content-md-start
      "
    >
      <li
        class="page-arrow pr-3 pr-md-4"
        :class="{ 'page-arrow--disable': currentPage === 1 }"
        @click="pageMove(-1)"
      >
        <div class="i page-arrow__left"></div>
      </li>
      <template v-for="(item, index) in pageArray" :key="`${item}-${index}`">
        <li
          v-if="item === 'Ellipsis'"
          class="page-ellipsis flex-center"
        ></li>
        <li
          v-else
          class="page-item flex-center"
          :class="{ 'page-item--active': item === currentPage }"
          @click="typeof item === 'number' ? changePage(item) : undefined"
        >
          {{ item }}
        </li>
      </template>
      <li
        class="page-arrow pl-3 pl-md-4"
        :class="{ 'page-arrow--disable': currentPage === totalPage }"
        @click="pageMove(1)"
      >
        <div class="i page-arrow__right"></div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 定义组件名称
defineOptions({
  name: 'Pagination'
})

// 定义 props
const props = defineProps<{
  totalPage?: number
  currentPage?: number
}>()

// 定义 emits
const emit = defineEmits<{
  changePage: [page: number]
}>()

// 计算属性

const pageArray = computed(() => {
  let arr: (number | string)[] = []
  let ellipsis = false
  const total = props.totalPage ?? 1

  for (let i = 1; i <= total; i++) {
    if (!showPage(i)) {
      if (!ellipsis) {
        arr.push('Ellipsis')
        ellipsis = true
      }
    } else {
      ellipsis = false
      arr.push(i)
    }
  }

  if (arr[0] === 'Ellipsis') arr.shift()
  return arr
})

// 方法
const changePage = (page: number) => {
  emit('changePage', page)
}

const pageMove = (move: number) => {
  const current = props.currentPage ?? 1
  const total = props.totalPage ?? 1

  if (move < 0) {
    if (current > 1) {
      changePage(current + move)
    }
  } else {
    if (current < total) {
      changePage(current + move)
    }
  }
}

const showPage = (page: number): boolean => {
  const total = props.totalPage ?? 1
  const current = props.currentPage ?? 1

  if (total <= 6) return true
  if (
    (page <= current + 2 && page >= current) ||
    page === total
  ) {
    return true
  }
  if (
    current >= total - 3 &&
    (page >= total - 2 || page === 1)
  ) {
    return true
  }
  return false
}
</script>

<style lang="scss" scoped>
// .pagination {
//   height: 40px;

//   @media (max-width: 575.98px) {
//     height: 32px;
//   }

//   .page-arrow,
//   .page-item {
//     cursor: pointer;
//   }

//   .page-ellipsis {
//     width: 24px;

//     &::after {
//       content: '';
//       width: 100%;
//       height: 1px;
//       background-color: #004d4d;
//       opacity: 0.2;
//     }
//   }

//   .page-item {
//     font-size: 18px;
//     font-weight: 500;
//     line-height: 1.3;
//     width: 30px;
//     height: 40px;
//     color: #008080;
//     margin: 0 4px;

//     @media (max-width: 1023.98px) {
//       width: 20px;
//       height: 32px;
//     }

//     @media (max-width: 767.98px) {
//       width: 20px;
//       height: 30px;
//       margin: 0 2px;
//     }

//     &:hover,
//     &--active {
//       color: #0066cc;
//     }
//   }

//   .page-arrow {
//     &--disable {
//       .page-arrow__left,
//       .page-arrow__right {
//         background-color: #adb5bd;
//       }
//     }

//     &:hover {
//       .page-arrow__left,
//       .page-arrow__right {
//         &::before {
//           transform: translate(-50%, -50%);
//         }

//         &::after {
//           transform: translate(150%, -50%);
//         }
//       }
//     }

//     &--disable {
//       &:hover {
//         .page-arrow__left,
//         .page-arrow__right {
//           &::before {
//             transform: translate(-260%, -50%);
//           }

//           &::after {
//             transform: translate(-50%, -50%);
//           }
//         }
//       }
//     }

//     &:active {
//       .page-arrow__left,
//       .page-arrow__right {
//         &::before {
//           transform: translate(-260%, -50%);
//         }

//         &::after {
//           transform: translate(-50%, -50%);
//         }
//       }
//     }
//   }

//   .page-arrow__left,
//   .page-arrow__right {
//     width: 18px;
//     height: 18px;
//     background-color: #003366;
//     border-radius: 50%;
//     overflow: hidden;
//     cursor: pointer;
//     position: relative;

//     &::before,
//     &::after {
//       content: '';
//       width: 6px;
//       height: 9px;
//       position: absolute;
//       top: 50%;
//       left: 55%;
//       background-image: url('');
//       background-size: contain;
//       background-repeat: no-repeat;
//       background-position: center;
//       transition: transform 0.4s ease;
//     }

//     &::before {
//       transform: translate(-260%, -50%);
//     }

//     &::after {
//       transform: translate(-50%, -50%);
//     }
//   }

//   .page-arrow__left {
//     transform: scale(-1);
//     margin-right: 15px;

//     @media (max-width: 1023.98px) {
//       margin-right: 11px;
//     }

//     @media (max-width: 767.98px) {
//       margin-right: 5px;
//     }
//   }

//   .page-arrow__right {
//     margin-left: 15px;

//     @media (max-width: 1023.98px) {
//       margin-left: 11px;
//     }

//     @media (max-width: 767.98px) {
//       margin-left: 5px;
//     }
//   }
// }

.pagination {
  height: 40px;
}

@media(max-width: 575.98px) {
  .pagination {
    height: 32px;
  }
}

ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  vertical-align: baseline;
  list-style: none;
}

.d-flex {
  display: flex!important
}
.align-items-center {
  align-items: center!important
}
.h-100 {
  height: 100%!important
}
.justify-content-center {
  justify-content: center!important
}

@media(min-width: 768px) {
  .justify-content-md-start {
    justify-content: flex-start!important
  }
}

.i {
  position: relative
}

.i:after,.i:before {
  content: "";
  display: inline-block;
  vertical-align: middle
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center
}

.pagination .page-ellipsis {
  width: 24px;
}

.pagination .page-ellipsis:after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #1a1c20;
  opacity: .2;
}

.pagination .page-item {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em;
  width: 30px;
  height: 40px;
  color: #64788f;
  margin: 0 4px;
}

@media(max-width: 1023.98px) {
  .pagination .page-item {
    line-height:1.25;
    letter-spacing: .04em;
  }
}

@media(max-width: 767.98px) {
  .pagination .page-item {
    font-size:14px;
    line-height: 1.285;
    letter-spacing: .02em;
  }
}

@media(max-width: 1023.98px) {
  .pagination .page-item {
    width:20px;
    height: 32px;
  }
}

@media(max-width: 767.98px) {
  .pagination .page-item {
    width:20px;
    height: 30px;
    margin: 0 2px;
  }
}

.pagination .page-arrow--disable .page-arrow__left,.pagination .page-arrow--disable .page-arrow__right {
  background-color: #e4e4e6;
}

.pagination .page-arrow:hover .page-arrow__left:before,.pagination .page-arrow:hover .page-arrow__right:before {
  transform: translate(-50%,-50%);
}

.pagination .page-arrow:hover .page-arrow__left:after,.pagination .page-arrow:hover .page-arrow__right:after {
  transform: translate(150%,-50%);
}

.pagination .page-arrow--disable:hover .page-arrow__left:before,.pagination .page-arrow--disable:hover .page-arrow__right:before {
  transform: translate(-260%,-50%);
}

.pagination .page-arrow--disable:hover .page-arrow__left:after,.pagination .page-arrow--disable:hover .page-arrow__right:after {
  transform: translate(-50%,-50%);
}

.pagination .page-arrow:active .page-arrow__left:before,.pagination .page-arrow:active .page-arrow__right:before {
  transform: translate(-260%,-50%);
}

.pagination .page-arrow:active .page-arrow__left:after,.pagination .page-arrow:active .page-arrow__right:after {
  transform: translate(-50%,-50%);
}

.pagination .page-arrow__left,.pagination .page-arrow__right {
  width: 18px;
  height: 18px;
  background-color: #0032a0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.pagination .page-arrow__left:after,.pagination .page-arrow__left:before,.pagination .page-arrow__right:after,.pagination .page-arrow__right:before {
  content: "";
  width: 6px;
  height: 9px;
  position: absolute;
  top: 50%;
  left: 55%;
  background-image: url();
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: hsla(0,0%,100%,0);
  transition: transform .4s ease;
}

.pagination .page-arrow__left:before,.pagination .page-arrow__right:before {
  transform: translate(-260%,-50%);
}

.pagination .page-arrow__left:after,.pagination .page-arrow__right:after {
  transform: translate(-50%,-50%);
}

.pagination .page-arrow__left {
  transform: scale(-1);
  margin-right: 15px;
}

@media(max-width: 1023.98px) {
  .pagination .page-arrow__left {
    margin-right:11px;
  }
}

@media(max-width: 767.98px) {
  .pagination .page-arrow__left {
    margin-right:5px;
  }
}

.pagination .page-arrow__right {
margin-left: 15px;
}

@media(max-width: 1023.98px) {
  .pagination .page-arrow__right {
    margin-left:11px;
  }
}

@media(max-width: 767.98px) {
  .pagination .page-arrow__right {
    margin-left:5px;
  }
}

.pagination .page-item--active,.pagination .page-item:hover {
  color: #0048e8;
}
</style>